import styles from './index.module.scss'
import ArticleItem from '@c/ArticleItem'
import { useEffect, useState } from 'react'
import http from '@utils/request'
import { useNavigate } from 'react-router-dom'
// /**
//  * 文章列表组件
//  * @param {String} props.channelId 当前文章列表所对应的频道ID
//  * @param {String} props.aid 当前 Tab 栏选中的频道ID
//  */
const ArticleList = ({ channelId, aid }) => {
  const navigator = useNavigate()
  const [list,setList] = useState([])
  // 获取文章列表
  useEffect( () => {
    const load = async () => {
      const res = await http.get('/articles', {
        params: {
          channel_id: channelId,
          timestamp: Date.now(),
        },
      })
      
      let {
        data: { results },
      } = res
      setList(results)
      
    }
    
    if (channelId === aid) {
      load()
    }
  }, [channelId, aid])
  const onToArticleDetail = (art_id) => {
    navigator(`/article/${art_id}`)
  }
  return (
    <div className={styles.root}>
      <div className="articles">
        {
          list.map( (item) => (
            <div
              className="article-item"
              key={item.art_id}
              onClick={() => onToArticleDetail(item.art_id)}
            >
               <ArticleItem article={item}></ArticleItem>
            </div>
          ))
        }
      </div>
    </div>
  )
}

export default ArticleList